import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:robotcontrol/entity/category_model.dart';
import 'package:robotcontrol/http/http_manager.dart';
import 'package:robotcontrol/http/url.dart';
import 'package:animations/animations.dart';
import 'package:robotcontrol/page/discovery/category_detail_page.dart';
import 'package:robotcontrol/utils/cache_image.dart';
class CategoryPage extends StatefulWidget{
  @override
  _CategoryPageState createState()=>_CategoryPageState();
}
class _CategoryPageState extends State<CategoryPage> with AutomaticKeepAliveClientMixin{
  List<CategoryModel> list = [];
  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive =>true;


  @override
  void initState() {
    super.initState();
    _loadData();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Container(
      padding: EdgeInsets.all(5),
      decoration: BoxDecoration(color: Color(0xfff2f2f2)),
      child: GridView.builder(
        itemCount: list.length,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            // 交叉轴方向的个数
              crossAxisCount: 2,
            // 主轴方向的间距
          mainAxisSpacing: 5,
            // 交叉轴方向的间距
            crossAxisSpacing: 5
          ),
          itemBuilder: (context,index){
            // 一个容器，当点击时，它会增长到填满屏幕以显示新内容。
            return OpenContainer(
              // 过度动画时间设置
              // transitionDuration: Duration(milliseconds: 3000),
              // 默认显示的Widget
              closedBuilder: (context,action){
                return _categoryImage(index);
              },
              //点击
              openBuilder: (context,action){
                return CategoryDetailPage(categoryModel:list[index]);
              },
            );
          }),
    );
  }
Widget  _categoryImage(index){
    return Stack(
      children: [
        ClipRRect(
          borderRadius: BorderRadius.circular(4),
          child: cacheImage(list[index].bgPicture),
        ),
        Center(
          child: Text('#${list[index].name}',
          style: TextStyle(
            color: Colors.white,
            fontSize: 22,
            fontWeight: FontWeight.bold
          ),),
        )
      ],
    );
}
  void _loadData() async {
    HttpManager.getData(Url.categoryUrl, success: (json) {
      list = (json as List)
          .map((model) => CategoryModel.fromJson(model))
          .toList();
      setState(() {
      });
    });
  }

}

